<template>
  <div id="app">
        <component :is="view"></component>
  </div>
</template>

<script>

import login from './components/Login' 
import index from './components/Index'
export default {
  name: 'App',
  data(){
   return { 
   }
  },
  computed:{
    view(){
      return this.$store.state.appView;
    }
  },
  components:{
    login,index
  },
  created(){ 
            //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) { 
            this.$store.replaceState(JSON.parse(sessionStorage.getItem("store")));
        }

        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
  }
   
}
</script>
<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: white;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333; 
    line-height: 30px;
    min-height: 520px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333; 
    line-height: 30px;
  }

  .el-menu{
    min-height: 520px;
  }
</style>
